H5实现移动端图片预览：手势缩放， 手势拖动，双击放大... |
您所在的位置：网站首页 › html 点击图片放大 › H5实现移动端图片预览：手势缩放， 手势拖动，双击放大... |
H5实现移动端图片预览：手势缩放， 手势拖动，双击放大...
|
前言本文将介绍如何经过js实现移动端图片预览，包括图片的 预览模式，手势缩放，手势拖动，双击放大等基本功能；代码地址http://pangyongsheng.github.io/imgPreview/css 查看示例效果：图片预览主要有如下几个功能点组成：html 监听图片点击事件，进入图片预览模式 自定义手势事件, （双指缩放，滑动，双击。。。） 监听图片手势事件，经过 transform-matrix 实现图片的各类变换；2、实现方法 一、图片预览模式 图片预览即点击图片在页面中插入一个黑色全屏背景框并将图片居中显示。封装时，为了只对指定图片添加功能，可经过监听指定类名或添加某种属性的img标签监听；另外需在对背景框绑定点击事件，退出预览模式。一下是一个简单示例代码：git //点击图片进入预览 var $Dom = document.querySelector(".preview"); $Dom.onclick = function() { var temp = this.src; var objE = document.createElement("div"); objE.innerHTML = '' + 'css样式参考github .bgM{ width: 100%; height: 100%; position: absolute; top: 0;left: 0;right: 0;bottom: 0; z-index: 1000; background-color: rgba(0,0,0,0.85); overflow: hidden; } .bgM img{ width: 100%; max-height:100%; position: absolute; top: 0;left: 0;right: 0;bottom: 0; z-index: 1001; margin: auto; } 复制代码 二、自定义手势事件这里经过监听移动端touch事件实现自定义双指缩放，单指滑动，双击事件，并经过事件属性传递相关参数，如缩放比例，滑动距离等，详细实现方式参考这篇博客：请参考此博文：https://www.cnblogs.com/pangys/p/9119845.html 这里只大概说明；数组 当触发touch事件的时候，会生成一个TouchEvent对象，咱们可经过其属性e.touches.length来判断是否多点触控，经过e.touches[index].pageX,e.touches[index].pageY获取去触点坐标，经过e.target获取dom节点；bash 这里为了方便，直接监听document事件而后对目标元素触发事件，实际也能够直接对img监听事件，而后分别处理； （1）手势事件 监听touchstart事件，若e.touches.length>=2,为双指事件，获取触点坐标（触点坐标-目标元素.offsetLeft/Top）计算两个点中点 添加到事件属性中，改变相关状态，触发gesturestart事件； 监听touchmove事件，若e.touches.length>=2,获当前取触点坐标和gesturestart坐标，计算出缩放比例及角度，触发gesturechange事件； 监听touchend事件，根据前面事件记录的状态触发结束gestureend事件； （2）滑动事件 监听touchstart事件，若e.touches.length 0.5 && tMatrix[0] + sc - 1 < 3 ? tMatrix[0] + sc - 1 : tMatrix[0]; tMatrix[3] = tMatrix[3] + sc - 1 > 0.5 && tMatrix[3] + sc - 1 < 3 ? tMatrix[3] + sc - 1 : tMatrix[3]; var temp = tMatrix.join(","); $imgs.style.transform = "matrix(" + temp + ")"; break; 复制代码 （3）监听 gestureend 获取移动边界范围边界 case "gestureend": maxMove(); break; 复制代码 可移动边界范围的计算: 对于图片中的任意点可拖动范围都是相同的，那么以缩放中心点来计算，以下图所示，对于图片中的缩放中心点p，有缩放后距离边距的距离，可移动的范围均为 缩放后增长或减小的距离 - （缩放中心点距离图片边缘的距离），即 | 缩放比例 - 1 | * p点距离边缘的距离；代码以下： function maxMove(){ //最大可拖动范围 var sca = tMatrix[0]; maxSwipeLeft = Math.abs(sca - 1) * originLast[0]; maxSwipeRight = Math.abs(sca - 1) * (imgWidth - originLast[0]); maxSwipeTop = Math.abs(sca - 1) * originLast[1]; maxSwipeBottom = Math.abs(sca - 1) * (imgHeight - originLast[1]); } 复制代码 (4)监听 swipeMove 拖动图片，需考虑是否在可拖动范围 if (!maxSwipeLeft || !maxSwipeRight || !maxSwipeTop || !maxSwipeBottom) return; if (event.distance[0] > 0 && maxSwipeLeft < tMatrix[4]) return; if (event.distance[0] < 0 && maxSwipeRight < -tMatrix[4]) return; if (event.distance[1] > 0 && maxSwipeTop < tMatrix[5]) return; if (event.distance[1] < 0 && maxSwipeBottom < -tMatrix[5]) return; tMatrix[4] = tMatrix[4] + parseInt(event.distance[0]); tMatrix[5] = tMatrix[5] + parseInt(event.distance[1]); var temp = tMatrix.join(","); $imgs.style.transform = "matrix(" + temp + ")"; break; 复制代码 （5）监听 doubleTouch 实现双击点缩放 case "doubleTouch": originLast = event.position; $imgs.style.transformOrigin = event.position[0] + "px " + event.position[1] + "px"; tMatrix[0] = 2; tMatrix[3] = 2; var temp = tMatrix.join(","); $imgs.style.transform = "matrix(" + temp + ")"; maxMove(); break;复制代码 （6）监听 oneTouch 实现退出预览
case "oneTouch": var $bg = document.querySelector(".bgM"); document.body.removeChild($bg); break; 复制代码 |
【本文地址】
今日新闻 |
推荐新闻 |